Feature/botao buscar scraper auto#35
Conversation
- Atualiza App.tsx, JobsHeaderCard.tsx e JobsFiltersCard.tsx com melhorias visuais e estruturais - Refatora componentes compartilhados (ui/button.tsx, ui/theme-toggle.tsx) - Ajusta estilos globais em index.css (cores, tema e consistência visual) - Adiciona novo logotipo (logo-painel-vagas.svg) para o cabeçalho
- JobsFiltersCard: - Move ações do cabeçalho e exibição de metadados para este card. - Busca em linha com ações. - Seleção de palavra-chave e arquivo reorganizada. - JobsHeaderCard: - Simplificado para exibir apenas logotipo e alternância de tema. - Remove importação não utilizada do ThemeToggle. - JobsTableCard: - Adiciona margem inferior e espaçamento para banner de erro. - Reordena colunas da tabela: palavra-chave e fonte para o final. - Ajusta cor do link no modo escuro. - CSS/Tailwind: - Ajusta a cor do anel (--ring) para foco.
… feature/nayara-dark-mode-ui
test: update JobsHeaderCard tests for accessibility and theme toggle test: enhance JobsFiltersCard tests with meta data and actions fix: update vitest configuration for setup files chore: add vitest setup for matchMedia polyfill
There was a problem hiding this comment.
Pull request overview
Atualiza a UI do painel (novo header com logo + toggle de tema) e reorganiza a área de filtros/ação de “Buscar vagas”, além de ajustar a configuração de testes do frontend (Vitest) para suportar matchMedia.
Changes:
- Adiciona
vitest.setup.tse aponta o Vitest para ele, centralizando setup do jest-dom e stub dematchMedia. - Refatora componentes de header/filtros (header vira faixa com logo + toggle; badges de arquivo/total vão para filtros; ação “Buscar vagas” passa via
actions). - Ajusta tokens de tema/estilos e atualiza testes para refletir a nova UI.
Reviewed changes
Copilot reviewed 12 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/vitest.setup.ts | Novo setup global do Vitest (jest-dom + stub de matchMedia). |
| frontend/vitest.config.js | Troca setupFiles para usar o novo vitest.setup.ts. |
| frontend/tests/unit/pages/App.test.tsx | Ajusta asserção para buscar a marca/identificação via alt. |
| frontend/tests/unit/components/JobsHeaderCard.test.tsx | Atualiza testes para o novo JobsHeaderCard e mock de tema. |
| frontend/tests/unit/components/JobsFiltersCard.test.tsx | Atualiza testes para nova API de props (meta/actions). |
| frontend/src/index.css | Ajusta variáveis de cores e remove margem/padding padrão do body. |
| frontend/src/components/ui/theme-toggle.tsx | Ajusta classes de hover/transição do botão de tema. |
| frontend/src/components/ui/button.tsx | Ajusta hover opacity do botão default. |
| frontend/src/components/JobsTableCard.tsx | Reordena colunas e ajusta espaçamentos/estilo de link no dark mode. |
| frontend/src/components/JobsHeaderCard.tsx | Refatora header para faixa full-width com logo + toggle tema. |
| frontend/src/components/JobsFiltersCard.tsx | Refatora filtros para receber meta e actions e exibir badges. |
| frontend/src/App.tsx | Reorganiza layout e passa ação “Buscar vagas” para o JobsFiltersCard. |
| frontend/package-lock.json | Remove lockfile do workspace frontend (monorepo usa lockfile raiz). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| Object.defineProperty(window, "matchMedia", { | ||
| writable: true, | ||
| value: (query: string) => ({ | ||
| matches: false, | ||
| media: query, |
There was a problem hiding this comment.
window.matchMedia is defined via Object.defineProperty without configurable: true. This makes the property non-configurable by default and breaks tests that later call vi.stubGlobal('matchMedia', ...) (e.g. useTheme.test.ts), because Vitest can't redefine a non-configurable global. Define the property with configurable: true (and keep it writable) so tests can safely override it.
| {meta.total} vagas | ||
| </Badge> | ||
| <> | ||
| <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end"> |
There was a problem hiding this comment.
Using w-screen together with a fixed -mx-8 inside a container that has px-4 on small screens can create horizontal overflow/scroll (the negative margin overcompensates the parent padding when px-4 is active). Consider using w-full with padding handled by the parent, or make the negative margin responsive (e.g. match px-4 on small and px-8 on md+) to avoid layout overflow.
| <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end"> | |
| <div className="w-full bg-[#004726] dark:bg-[#003318] p-6 -mx-4 md:-mx-8 flex items-end"> |
| target="_blank" | ||
| rel="noreferrer" | ||
| className="text-primary underline-offset-4 hover:underline" | ||
| className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]" |
There was a problem hiding this comment.
The link color is overridden with a hard-coded dark:text-[#14AE5C], which bypasses the theme token variables and can drift if the palette changes. Prefer using the existing CSS variables / Tailwind color tokens (e.g. adjusting --primary/--accent for dark mode, or using a semantic class) so the link styling stays consistent across theme updates.
| className="text-primary underline-offset-4 hover:underline dark:text-[#14AE5C]" | |
| className="text-primary underline-offset-4 hover:underline" |
No description provided.